<template>
	<div class="RedBag">
		<div shadow="never">

			<div class="RedBag_intro">
				领取红包
				<div class="hr"></div>
			</div>
			<!-- &lt;!&ndash;一堆红包&ndash;&gt; -->
			<div class="redbag_get">
				<div v-for="redbag in abletogetbags" @click="getBag(redbag.red_bag_id)" class="redbag_div"  v-bind:style="{backgroundImage:'url(' + bg + ')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}">
					<div class="redbag_div_1"><span class="redbag_span_1">￥</span><span class="redbag_span_2">{{redbag.face_value}}</span></div>
					<div class="redbag_div_2">{{redbag.red_bag_content}}</div>
				</div>
			</div>

			<div class="RedBag_intro">
				个人红包
				<div class="hr"></div>
			</div>

			<el-tabs
				v-model="activeName"
				type="border-card"
				class="redbag_tabs"
				>
				<el-tab-pane label="全部红包" name="first">
					<!--加图标-->
					<span slot="label"><i class="iconfont">&#xe615;</i> 全部红包</span>

					<div class="redbaglist">
						<el-table :data="allRedBags">
							<el-table-column label="红包图片" align="center" width="200px">

								<template slot-scope="scope">
									<!-- <i class="el-icon-time"></i> -->
									<!-- <span style="margin-left: 10px">{{ scope.row.pic }}</span> -->
									<img src="../../../assets/红包.png" height="80px" width="60px" style="margin-left: 10px">
								</template>
							</el-table-column>
							<el-table-column label="金额" align="center">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>金额: {{ scope.row.redBag.face_value}}</p>
										<p>拥有者: {{ userObject.user_name }}</p>
										<div slot="reference" class="name-wrapper">
											<el-tag size="medium">{{ scope.row.redBag.face_value }}</el-tag>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="获取时间" align="center">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px">{{scope.row.create_date}}</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
				<el-tab-pane label="已过期" name="second">
					<!--加图标-->
					<span slot="label"><i class="iconfont">&#xe734;</i> 已过期</span>
					<div class="redbaglist">
						<el-table :data="outtimebags">
							<el-table-column label="红包图片">
								<template slot-scope="scope">
									<!-- <i class="el-icon-time"></i> -->
									<!-- <span style="margin-left: 10px">{{ scope.row.pic }}</span> -->
									<el-avatar shape="square" :size="80" src='https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' style="margin-left: 10px"></el-avatar>
								</template>
							</el-table-column>
							<el-table-column label="金额">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>金额: {{ scope.row.redBag.face_value}}</p>
										<p>拥有者: {{ userObject.user_name }}</p>
										<div slot="reference" class="name-wrapper">
											<el-tag size="medium">{{ scope.row.redBag.face_value }}</el-tag>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="获取时间">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px">{{scope.row.create_date}}</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
				<el-tab-pane label="已使用" name="third">
					<span slot="label"><i class="iconfont">&#xe639;</i> 已使用</span>
					<div class="redbaglist">
						<el-table :data="usedbags">
							<el-table-column label="红包图片">
								<template slot-scope="scope">
									<!-- <i class="el-icon-time"></i> -->
									<!-- <span style="margin-left: 10px">{{ scope.row.pic }}</span> -->
									<el-avatar shape="square" :size="80" src='https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' style="margin-left: 10px"></el-avatar>
								</template>
							</el-table-column>
							<el-table-column label="金额">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>金额: {{ scope.row.redBag.face_value}}</p>
										<p>拥有者: {{ userObject.user_name }}</p>
										<div slot="reference" class="name-wrapper">
											<el-tag size="medium">{{ scope.row.redBag.face_value }}</el-tag>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="获取时间">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px">{{scope.row.create_date}}</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	// @tab-click="handleClick"
	import RedBagService from "./RedBagService";
	import Vue from 'vue'
	export default {
		data() {
			return {
				allRedBags: [],
				outtimebags:[],
				usedbags:[],
				activeName:'first',
				userObject:{},
				bg:require('@/assets/红包.png'),
				abletogetbags:[]
			}
		},
		
		created() {
			this.getAll()
		},
		methods: {
			handleEdit(index, row) {
				//console.log(index, row);
			},
			handleDelete(index, row) {
				//console.log(index, row);
			},
      getBag(red_bag_id){
				//console.log(red_bag_id);
				RedBagService.gainService({
          red_bag_id:red_bag_id
				},r=>{
				  if(r.gainResult==1){
            this.$message({
              type: 'success',
              message: '领取成功!'
            });
				  }else{
            this.$message({
              type: 'error',
              message: '领取失败!'
            });
				  }
					this.getAll();
	      })
      },
			getAll(){
        Vue.axios.get(`http://localhost:8080/user/getlogin`).then(r=>{
          //console.log(r.data)

          this.userObject = r.data.loginUser;

          if(!this.userObject){
            alert('对不起,请先登录!');
            this.$router.push({
              name: 'Login'
            });
          }else{
            Vue.axios.get('http://localhost:8080/redbagrecord/getByState',{params:{redbag_state:61}}).then(res=>{
              //console.log(res)
              this.allRedBags=res.data.redbaglist;
              //console.log(this.allRedBags);
            })
            Vue.axios.get('http://localhost:8080/redbagrecord/getByState',{params:{redbag_state:62}}).then(res=>{
              //console.log(res)
              this.usedbags=res.data.redbaglist;
              //console.log(this.ausedbags);
            })
            Vue.axios.get('http://localhost:8080/redbagrecord/getByState',{params:{redbag_state:63}}).then(res=>{
              //console.log(res)
              this.outtimebags=res.data.redbaglist;
              //console.log(this.outtimebags);
            })

          }

        });
        //获得可领取红包
        RedBagService.getAllService({

        },r=>{
          //console.log(r);
          this.abletogetbags=r.redbaglist;
        })
			}
		},
	}
</script>

<style lang="less">
	.RedBag{
		width: 100%;
		margin: 20px;
		.RedBag_intro{
			font-family: "Helvetica Neue";
			font-size: 26px;
			line-height: 28px;
			color: #606266; //字体颜色
			letter-spacing: 1px;
			
		}
		.redbag_tabs{
			margin-top: 60px;
			
			box-shadow:  0 1px 1px 0 rgba(96, 98, 102, 0.1);
			border-radius: 10px//设置圆角
		}
		.hr {
			border-bottom: 1px solid #f5a8a8;
			height: 0px;
			margin-top: 10px;
		}
		.redbag_get{
			height: 200px;
			display: flex;
			flex-wrap: wrap;
			.redbag_div{
				height: 150px;
				width: 100px;
				margin: 10px;
				text-align:center;
				.redbag_div_1{
					color: gold;
					margin-top: 60px;
					.redbag_span_1{

					}
					.redbag_span_2{
						font-size: 30px;//字体
						font-weight: 400; //加粗
					}
				}
				.redbag_div_2{
					margin-top: 30px;
					font-size: 10px;//字体
					font-weight: 400; //加粗
					color: white;
				}
			}
		}
	}
</style>
